<template>
    <div class="container">
        <div class="box col-12">
            <div class="box-header">
                <div class="header-title">
                    <button class="btn btn-primary">新增</button>
                    <button class="btn btn-danger">删除</button>
                    <button class="btn btn-success" @click="showSelected">???</button>
                </div>
                <div class="header-body">
                    <form class="form-inline" ref="getBody" autoComplete="on" :model="getBody" :rules="getBodyRules">
                        <div prop="userId" class="form-group">
                            <label>UserId</label>
                            <input class="form-control" v-model="getBody.userId" placeholder="用户ID" autoComplete="on">
                        </div>
                        <!-- <div prop="userName" class="form-group">
                            <label>UserName</label>
                            <input class="form-control" v-model="getBody.userName" placeholder="UserName">
                        </div> -->
                        <div prop="role" class="form-group">
                            <label>Role</label>
                            <input class="form-control" v-model="getBody.role" placeholder="角色" autoComplete="on">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" @click="lists(1)">查询</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="box-body">
                <div class="iView-table">
                    <Table ref="selection" @on-select-all="checkAll" @on-current-change="showSelected" :columns="columns" :data="list" border stripe height="400"></Table>
                </div>
                <div class="iView-page" style="margin-top:10px;">
                    <Page ref="pages" @on-change="onChange" @on-page-size-change="onPageSizeChange" :total="getBody.total" :page-size-opts="getBody.pageSizeOpts" :placement="'top'" show-sizer show-elevator show-total />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as userService from './userService';
import * as _ from 'lodash';
export default {
    name: 'user',
    data() {
        const userIdCheck = () => {

        };
        const roleCheck = () => {

        };
        return {
            isCheckAll: false,
            list: [],
            columns: [
                { type: 'selection', width: 50, align: 'center' },
                { key: 'UserId', title: 'ID', sortable: true },
                { key: 'UserName', title: '用户名', sortable: true },
                { key: 'PassWord', title: '密码', sortable: true },
                { key: 'Role', title: '角色', sortable: true },
                { key: 'Custom', title: '操作' },
            ],
            getBody: {
                userId: "",
                role: "",
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                pageSizeOpts: [5, 10, 15, 20, 25, 50, 100]
            },
            getBodyRules: {
                userId: [],
                role: []
            }
        }
    },
    created() {

    },
    mounted() {
        this.lists();
    },
    methods: {
        // 获取列表
        lists(index) {
            let that = this;
            if (index) {
                this.getBody.pageIndex = index;
                this.$refs['pages'].currentPage = index;
            }
            userService.getList(this.getBody).then(res => {
                that.list = res.data.list;
                that.getBody.total = res.data.total;
            })
        },
        // 分页
        onChange(index) {
            this.getBody.pageIndex = index;
            this.lists();
        },
        onPageSizeChange(size) {
            this.getBody.pageSize = size;
            if (this.getBody.pageIndex == 1) {
                this.lists();
            }
        },
        // 列表多选
        checkAll() {
            // let that = this;
            // if (this.isCheckAll) {
            //     this.isCheckAll = false;
            //     _.forEach(this.list, (item, index) => {
            //         item.checked = false;
            //     })
            // } else {
            //      this.isCheckAll = true;
            //     _.forEach(this.list, (item, index) => {
            //         item.checked = true;
            //     })
            // }
        },
        // 列表多选
        showSelected() {
            let that = this;
            let checked = _.filter(this.list, (item, index) => {
                if (item.checked == true) {
                    return item;
                }
            })
            console.log(checked)
        }
    }

}
</script>

<style>
.col-12 {
  padding: 0 !important;
}
.container {
  width: 100%;
  margin: 0;
  padding: 10px;
}
.box {
  background-color: white;
  border-radius: 0 0 3px 3px;
}
.box-header {
  padding: 10px;
  border-top: 3px solid blue;
  border-radius: 3px 3px 0 0;
}
.header-title {
}
.header-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid gray;
}
.box-body {
  padding: 0 10px 10px 10px;
}
.ivu-page > li {
}
</style>
